<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

省：
<select name="province" id="province"  onchange="changeCity()">
    <option value="" >-- 请选择省 --</option>
</select>
市：
<select id="city" name="city" onchange="changeDistrict()">
  <option value="">-- 请选择市 --</option>
</select>
区（县）：
<select id="district" name="district" onchange="changehidden()">
  <option value="">-- 请选择县(区) --</option>
</select>
ajax数据:
<input id="testAjax" name="testAjax" value=""/>
</body>

<script type="text/javascript">
  $().ready(function testajax(){
    $.ajax({
      url:"/getcity2",
      type:'post',
      data:{},
      dataType: "json",
      success:function(data){
        $("#testAjax").val(data.get(i));
      }
    });
  });
  <script>
    $(function () {
    $("#btn").click(function () {
      $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
        console.log(data);
        var html = "";
          for (var i=0;i<data.length;i++){
          html += "<tr>"+
                  "<td>"+ data[i].name +"</td>" +
                  "<td>"+ data[i].id +"</td>" +
                  "<td>"+ data[i].sex +"</td>" +
                  "<td>"+ data[i].age +"</td>" +
                  "<td>"+ data[i].height +"</td>" +
                  "<td>"+ data[i].weight +"</td>" +
                  "<td>"+ data[i].address +"</td>" +
                  "<td>"+ data[i].phone +"</td>" +
                  "</tr>"
        }
        $("#content").html(html);
      })
    })
  })
</script>
  // $().ready(function changeProvince(){
  //   //当省的内容发生变化的时候，响应的改变省的隐藏域的值
  //   $("#phidden").val($("#province option:selected").html());
  //   //页面加载完成，将省的信息加载完成
  //   //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
  //   $.ajax({
  //     url:"/getpervice",
  //     type:'post',
  //     data:"",
  //     dataType: "json",
  //     success:function(data){
  //       //清空城市下拉列表框的内容
  //       $("#province").html("<option value=''>-- 请选择省 --</option>");
  //       // $("#district").html("<option value=''>-- 请选择区/县 --</option>");
  //       //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
  //       for(var i=0;i<data.length;i++){
  //         var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
  //         $("#province").append($option);
  //       }
  //     },
  //     error:function(data){
  //       alert("失败了");
  //     }
  //   });
  // });
  function changeCity(){
    //当省的内容发生变化的时候，响应的改变省的隐藏域的值
    $("#phidden").val($("#province option:selected").html());
    //页面加载完成，将省的信息加载完成
    //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
    var pid = $("#province").val();
      $.ajax({
        url:"/getcity",
        type:'post',
        data:{"pid":pid},
        dataType: "json",
        success:function(data){
          //清空城市下拉列表框的内容
          $("#city").html("<option value=''>-- 请选择市 --</option>");
          $("#district").html("<option value=''>-- 请选择区/县 --</option>");
          //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
          for(var i=0;i<data.length;i++){
            var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
            $("#city").val($option);
          }
        },
        error:function(data){
          alert("失败了");
        }
      });
  }

  function changeDistrict(){
    //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
    $("#chidden").val($("#city option:selected").html());
    //页面加载完成，将省的信息加载完成
    //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
    var pid = $("#city").val();
    $.ajax({
      url:"/getarea",
      data:{"pid":pid},
      dataType:"json",
      success:function(data){
        //清空城市下拉列表框的内容
        $("#district").html("<option value=''>-- 请选择区/县 --</option>");
        for(var i=0;i<data.length;i++){
          var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
          $("#district").append($option);
        }
      }
    });
  }

  function changehidden(){
    //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
    $("#dhidden").val($("#district option:selected").html());
  }
</script>
</html>
